<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <style>
        .select-list li input {
            width: 100px;
        }

        .box-main > .box-header {
            display: none;
        } 

		.search-collapse {
		    z-index:5;
		    position: fixed;
		    width: 73%;
		}

        .fixed-table-toolbar {
            display: none;
        }

		 .select-table{
		  padding-top: 80px;
		}
    </style>
</head>
<body class="gray-bg">
<input type="hidden" id="participators" name="participators" th:value="${participators}">
<input type="hidden" id="participators-view" name="participatorsName" th:value="${participatorsName}">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 组织机构
                </div>
                <div class="box-tools pull-right">
                    <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()" title="管理部门"><i
                            class="fa fa-edit"></i></a>
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                            class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                            class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                            class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="user-form">
                    <input type="hidden" id="deptId" name="deptId">
                    <input type="hidden" id="parentId" name="parentId">
                    <input type="hidden" id="status" name="status" value="0">
                    <div class="select-list">
                        <ul>
                            <li>
                               员工姓名：<input type="text" name="userName"/>
                            </li>
                            <li>
                                手机号码：<input type="text" name="phonenumber"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <!-- <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a> -->
                            </li>
                        </ul>
                    </div>
                </form>
            </div>


            <div class="col-sm-12 select-table table-striped pop-table">
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var prefix = ctx + "system/user";

    $(function () {
    	 
    	
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        queryUserList();

        /*  $('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
             var datas = $.isArray(rows) ? rows : [rows];        // 点击时获取选中的行或取消选中的行
             examine(e.type,datas);                                 // 保存到全局 Set() 里
        }); */
       
        queryDeptTree();
        
        setTimeout(function () {
        	$._tree.expandAll(true)
        },500);


    });

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            uniqueId: "userId",
            sortOrder: "desc",
            modalName: "用户",
            pageSize: 5,
            striped: true,
            clickToSelect: true, //是否启用点击选中行
            maintainSelected: true,
            onClickRow: onClickRow,
            columns: [{
                // field: 'userId',
                checkbox: true,
                formatter: getRowIsCheck
            },
                {
                    field: 'userId',
                    title: '用户ID',
                    visible: false
                },
                {
                    field: 'userName',
                    title: '用户名称'
                },
                {
                    field: 'dept.deptName',
                    title: '部门'
                },
                {
                    field: 'phonenumber',
                    title: '手机'
                }]
        };
        $.table.init(options);
    }

    /* var overAllIds = new Set();                // 全局保存选中行的对象

    function examine(type,datas){            // 操作类型，选中的行
        if(type.indexOf('uncheck')==-1){
            $.each(datas,function(i,v){        // 如果是选中则添加选中行的 id
                overAllIds.add(v.id);
            });
        }else{
            $.each(datas,function(i,v){
                overAllIds.delete(v.id);     // 删除取消选中行的 id
            });
        }
    } */

    function queryDeptTree() {
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
    }

    function expandAll(){
    	 $._tree.expandAll(true);
    }
    
    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    /* 用户管理-部门 */
    function dept() {
        var url = ctx + "system/dept";
        $.modal.openTab("部门管理", url);
    }

    var selected_arr = [];
    var selected_row = [];
    var selected_name = [];
    
    //是否选中该用户
     function getRowIsCheck(value, row, index) {
    	var participators_name= $('#participators-view').val();
        var participators = $('#participators').val();
        participators =  participators.substring(0,participators.length-1);
        participators_name = participators_name.substring(0,participators_name.length-1);
        //alert(participators_name);
        var userIds = participators.split(",");
        var userNames = participators_name.split(",");
       
        for (var i = 0; i < userIds.length; i++) {
        	addArr(selected_arr,userIds[i]);
        	var obj=new Object();
        	obj.userId=userIds[i];
        	obj.userName=userNames[i];
        	addRow(selected_name, obj);
            if (userIds[i] == row.userId) {
            	//addRow(selected_row,row);
            	 
                return {checked: true};
            }

        }
        //console.log(selected_arr);
        //alert(participators);
    }

  function addArr(arr, el){
	  var index = arr.indexOf(el);
      if (index < 0) {
    	  selected_arr.push(el); 
      }
  }
  
  function addRow(arr, el){
	  var flag=true;
	  for(var i = 0; i < arr.length; i++){
		  if(el.userId==arr[i].userId){
	            flag = false;
	            break;
	        }
	  }
	  
	    if(flag){
	    	arr.push(el);
	    }
  }

    function remove_arr_el(arr, el) {
        var index = arr.indexOf(el);
        if (index > -1) {
            arr.splice(index, 1);
        }
    }
    
    function remove_row_el(arr, el) {
    	for (var i = 0; i < arr.length; i++) {
            if (arr[i].userId == el.userId) {
            	 arr.splice(i, 1);
             }
        }
    }

    function onClickRow(row, $element) {
        //alert("单击行userId：" + row.userId + " userName：" + row.userName);
        let uniqueid = $element.attr('data-uniqueid');
        setTimeout(function () {
            let selected_class = $element.attr("class");
            var obj=new Object();
        	obj.userId=row.userId;
        	obj.userName=row.userName;
            if ("selected" == selected_class) {
            	addRow(selected_name,obj);
            	//addRow(selected_row,row);
            	addArr(selected_arr,uniqueid);
            } else {
                remove_arr_el(selected_arr, uniqueid);
                remove_row_el(selected_name, obj);
            }
        }, 200);

    }

    function setChecked(array) {
        for (let i in array) {
            $("#bootstrap-table").find("tr[data-uniqueid='" + array[i] + "']").addClass("selected");
            $("#bootstrap-table").find("tr[data-uniqueid='" + array[i] + "']").find("input[type='checkbox']").prop("checked", true);
        }
    }

    setTimeout(function () {
        clickEvent();
        //menuClick();
    }, 500);

    function clickEvent() {
        $('.pop-table .pagination-outline').find('li').click(function () {
            setTimeout(function () {
                setChecked(selected_arr);
                clickCallback(clickEvent);
            }, 300);
        });

        /*$("#bootstrap-table .bs-checkbox").find('input').click(function () {
            let uniqueid = $(this).parents('tr').attr('data-uniqueid');
            setTimeout(function () {
                let selected_class = $(this).parents('tr').attr("class");
                if ("selected" == selected_class) {
                    selected_arr.push(uniqueid);
                } else {
                    remove_arr_el(selected_arr, uniqueid);
                }
            }, 300);
        });*/
        $('.ui-layout-content').find('a').click(function () {
        	setTimeout(function () {
                setChecked(selected_arr);
            }, 300);
        });
    }
    
    /* function menuClick(){
    	$('.ui-layout-content').find('span').click(function () {
    		clickCallback(menuClick);
    		if( $('.ui-layout-content').find('a').hasClass('level3')){
    			$('.ui-layout-content').find('a[class="level3"]').click(function () {
                	setTimeout(function () {
                        setChecked(selected_arr);
                    }, 300);
                });
        	}
            if( $('.ui-layout-content').find('a').hasClass('level4')){
            	$('.ui-layout-content').find('a[class="level4"]').click(function () {
                	setTimeout(function () {
                        setChecked(selected_arr);
                    }, 300);
                });
        	}
        });
    	
    } */

    function clickCallback(callback) {
        callback();
    }
    

    function submitHandler(index, layero) {
        //var rows = $.table.bootstrapTable('getSelections');
        //var rows = $("#bootstrap-table").bootstrapTable('getSelections');
        var rows = selected_name;
       /*  if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        } */
        $.modal.close();

        var resHtml = '';
        var userIds = '';
        for (var i = 0; i < rows.length; i++) {
            resHtml += rows[i].userName + ',';
            userIds += rows[i].userId + ',';
        }
        
        if(userIds.substr(0,1) == ","){
        	userIds = userIds.substr(1,userIds.length);
        	resHtml = resHtml.substr(1,resHtml.length);
        }
        //赋值父页面的变量
        parent.$('#participators').val(userIds);
        parent.$('#participators-view').html(resHtml);
    }


</script>
</body>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
                &nbsp; <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i
                    class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</html>